<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" href="images/chang.ico">
	<link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="./css/normalize.css">
	<link rel="stylesheet" href="./css/dreamTree.css">
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
		integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	<!-- 点击爱心 -->
	<script src="./js/love.js"></script>
	<!-- L2Dwidget.js L2D网页动画人物 -->
	<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
	<script>
		L2Dwidget.init({
			"model": {
				"jsonPath": "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
				"scale": 1,
				"hHeadPos": 0.5,
				"vHeadPos": 0.618
			},
			"display": {
				"position": "right",
				"width": 100,
				"height": 150,
				"hOffset": -58,
				"vOffset": -53
			},
			"mobile": {
				"show": true,
				"scale": 0.5
			},
			"react": {
				"opacityDefault": 1.5,
				"opacityOnHover": 0.2
			}
		});
	</script>
	<title>许愿树</title>
</head>

<body>
	<!-- 头部 -->
	<header>
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="./index.html">首页</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="./photos.html?id=1">相册</a></li>
						<li><a href="./video.html">视频</a></li>
						<li><a href="./game.html">游戏</a></li>
					</ul>
					<form class="navbar-form navbar-left">
						<div class="form-group">
							<input type="text" class="form-control searchInput" placeholder="Search">
						</div>
						<button type="submit" class="btn btn-default" onclick="search()">搜索</button>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
								aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</header>
	<main>
		<!-- <canvas></canvas> -->
	</main>
	<!-- 脚部 -->
	<footer>
		
	</footer>

	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
		integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
		crossorigin="anonymous"></script>
	<!-- three.js引入 -->
	<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
	<script>
        //新场景对象
        const scene = new THREE.Scene()
        //形状
        let geometry = new THREE.BoxGeometry(100,100,100)
        // 材料
        let material = new THREE.MeshLambertMaterial({
            color:0x0000ff
        })
        // 网格对象
        let mesh = new THREE.Mesh(geometry,material)
        // 将网格对象加入场景
        scene.add(mesh)




        // 点光源
        let point = new THREE.PointLight(0xffffff)
        //光源位置
        point.position.set(400,200,300)
        // 将光源加入场景
        scene.add(point)
        // 环境光
        let ambient = new THREE.AmbientLight(0x444444)
        // 将环境光加入场景
        scene.add(ambient)


        //相机设置
        let width = window.innerWidth //窗口宽度
        let height = window.innerHeight//窗口高度
        let k = width/height //宽高比
        let s = 200 //视野范围系数
        // 创建相机
		var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
        //相机位置
        camera.position.set(200,300,200)
        //相机方向指向场景对象
        camera.lookAt(scene.position)
		
		
        //创建渲染器
        let renderer = new THREE.WebGLRenderer()
        // 渲染尺寸
        renderer.setSize(width,height)
        // 背景颜色
        renderer.setClearColor(0x9d3ff,1)
        //body元素中插入canvas对象
        document.querySelector('main').appendChild(renderer.domElement)
        //场景和相机为参数,执行渲染
        renderer.render(scene,camera)
    </script>
</body>

</html>